<template>
  <div class="input-file-container">

    <el-checkbox v-model="select1" :label="`Bin ${message}`" border></el-checkbox>

    <div class="input-file-1">
      <el-input clearable placeholder="请选择文件" v-model='folderPath' @clear="clearContent">
        <el-button slot="append" icon="el-icon-folder-opened" @click="selectFolder(index)"></el-button>
      </el-input>
    </div>

    <div class="input-file-2">
      <el-col>
        <el-autocomplete clearable class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入地址"
          @select="handleSelect"></el-autocomplete>
      </el-col>
    </div>

    <div class="input-btn-1">
      <el-switch v-model="value1" active-text="程序有效位">
      </el-switch>
    </div>
    <div class="input-btn-2">
      <el-switch v-model="value2" active-text="FCT有效位">
      </el-switch>
    </div>

  </div>
</template>

<script>
// 导入组件
export default {
  name: 'component_loadfile',

  props: ['index', 'data'], // 接收父组件传递的 data
 
  data() {
    return {
      restaurants: [],
      state1: '',

      select1: false,
      value1: this.data.btn1,
      value2: this.data.btn2,

      message: this.data.message,

      folderPath: ''
    }
  },

  watch: {
    'data.selectedFolder': function (newVal) {
      this.folderPath = newVal;
    },
    'data.btn1': function (newVal) {
      this.value1 = newVal;
    },
    'data.btn2': function (newVal) {
      this.value2 = newVal;
    },
    'data.checked': function (newVal) {
      this.select1 = newVal;
    },
  },

  methods: {
    selectFolder(index) {
      console.log("index:", index)
      this.$parent.currentComponentIndex = index;
      this.$parent.isDataSent = false; // 设置 flag 为 true
      // 向主进程发送消息，请求打开文件夹选择对话框
      window.ipcRenderer.send('open-file-dialog');
    },

    clearContent() {
      this.$emit('update:data', { selectedFolder: '', checked: false, index: this.$parent.currentComponentIndex, btn1: this.value1, btn2:this.value2});
    },

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "PBL(0x00000000)", "address": "0x00000000" },
        { "value": "SBL(0x00021040)", "address": "0x00021040" },
        { "value": "APP(0x00042040)", "address": "0x00042040" },
        { "value": "CFG(0x000CA000)", "address": "0x000CA000" },
        { "value": "FCT(0x00101040)", "address": "0x00101040" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    }
  },

  mounted() {
    this.restaurants = this.loadAll();

    // this.folderPath = this.data.selectFolder;
    this.value1 = this.data.btn1;
    this.value2 = this.data.btn2;
    console.log("1", this.value1, this.value2)
    // 监听来自主进程的消息
    window.ipcRenderer.on('selected-file', (event, path) => {
        if (!this.$parent.isDataSent) {
          // 将更新后的 selectedFolder 发送给父组件
          console.log("currentComponentIndex", this.$parent.currentComponentIndex, path)
          this.$emit('update:data', { selectedFolder: path, checked: true, index: this.$parent.currentComponentIndex});
        }
        this.$parent.isDataSent = true; // 设置 flag 为 true
    });
  },
}
</script>

<style scoped>
.input-file-container {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 5px;
  /* 如果你想要居中对齐 */
}

.input-text-1 {
  margin-left: 50px;
  padding: 5px;
  font-size: 25px;
}

.input-file-1 {
  width: 250px;
  margin-left: 10px;
}

.input-file-2 {
  width: 180px;
  margin-left: 10px;
}

.input-btn-1 {
  margin-left: 10px;
  padding: 5px;
}

.input-btn-2 {
  margin-left: 10px;
  padding: 5px;
}
</style>
